<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/vue.global.js"></script>
</head>
<body>
<div id="app">
  <ol>
<!--     <li v-for="site in sites">
      {{ site.text }}
    </li> -->
    <li v-for="(site, index) in sites">
      {{ index }} -{{ site.text }}
    </li>
  </ol>
</div>
<script>
    const app = {
      data() {
        return {
          sites: [
            { text: 'Google' },
            { text: 'Runoob' },
            { text: 'Taobao' }
          ]
        }
      }
    }
    Vue.createApp(app).mount('#app')
</script>
<br>
<br>
<div id="app2">
    <ul>
      <template v-for="site in sites">
        <li>{{ site.text }}</li>
        <li>--------------</li>
      </template>
    </ul>
</div>
<script>
const app2 = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Runoob' },
        { text: 'Taobao' }
      ]
    }
  }
}
Vue.createApp(app2).mount('#app2')
</script>
<br>
<br>
<div id="app3">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
    <br>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
    <br>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>
<script>
const app3 = {
  data() {
    return {
      object: {
        name: '菜鸟教程',
        url: 'http://www.runoob.com',
        slogan: '学的不仅是技术，更是梦想！'
      }
    }
  }
}
 
Vue.createApp(app3).mount('#app3')
</script>
<br>
<br>
<div id="app4">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>
<script>
    Vue.createApp(app4).mount('#app4')
</script>
<br>
<br>
<div id="app5">
  <ul>
    <li v-for="n in evenNumbers">{{ n }}</li>
  </ul>
</div>
<script>
const app5 = {
    data() {
        return {
            numbers: [ 1, 2, 3, 4, 5 ]
         }
    },
    computed: {
        evenNumbers() {
            return this.numbers.filter(number => number % 2 === 0)
        }
    }
}
 
Vue.createApp(app5).mount('#app5')
</script>
<br>
<br>
<div id="app6">
    <select @change="changeVal($event)" v-model="selOption">
      <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
         <option v-if = "index === 1" :value="site.name" selected>{{site.name}}</option>
         <option v-else :value="site.name">{{site.name}}</option>
      </template>
    </select>
    <div>您选中了:{{selOption}}</div>
</div>
<script>
const app6 = {
    data() {
        return {
            selOption: "Runoob",
            sites: [
                  {id:1,name:"Google"},
                  {id:2,name:"Runoob"},
                  {id:3,name:"Taobao"}
            ]
         }
        
    },
    methods:{
        changeVal:function(event){
            this.selOption = event.target.value;
            // alert("你选中了"+this.selOption);
        }
    }
}
 
Vue.createApp(app6).mount('#app6')
</script>
<br>
<br>
<div id="todo-list-example">
  <form v-on:submit.prevent="addNewTodo">
    <label for="new-todo">添加 todo</label>
    <input
      v-model="newTodoText"
      id="new-todo"
      placeholder="例如：明天早上跑步"
    />
    <button>添加</button>
  </form>
  <ul>
    <todo-item
      v-for="(todo, index) in todos"
      :key="todo.id"
      :title="todo.title"
      @remove="todos.splice(index, 1)"
    ></todo-item>
  </ul>
</div>
<script>
const app7 = Vue.createApp({
  data() {
    return {
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: '看电影'
        },
        {
          id: 2,
          title: '吃饭'
        },
        {
          id: 3,
          title: '上 RUNOOB 学习'
        }
      ],
      nextTodoId: 4
    }
  },
  methods: {
    addNewTodo() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

app7.component('todo-item', {
  template: `
    <li>
      {{ title }}
      <button @click="$emit('remove')">删除</button>
    </li>
  `,
  props: ['title'],
  emits: ['remove']
})

app7.mount('#todo-list-example')
</script>
</body>
</html>